{% extends theme_path('admin/base.html') %}

{% block title %}{{ plugin.name }} - 插件设置{% endblock %}

{% block content %}
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="max-w-6xl mx-auto">
        <!-- 面包屑导航 -->
        <nav class="flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400 mb-6">
            <a href="{{ url_for('admin.plugins') }}" 
               class="hover:text-blue-600 dark:hover:text-blue-400">
                插件管理
            </a>
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
            <span class="text-gray-700 dark:text-gray-300">{{ plugin.name }}</span>
        </nav>

        <!-- 主要内容卡片 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden">
            <!-- 卡片头部 -->
            <div class="border-b border-gray-200 dark:border-gray-700 p-8">
                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0">
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
                            插件设置
                        </h1>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            配置 {{ plugin.name }} 插件的相关选项
                        </p>
                    </div>
                    <a href="{{ url_for('admin.plugins') }}" 
                       class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                        </svg>
                        返回列表
                    </a>
                </div>
            </div>

            <!-- 插件信息 -->
            <div class="px-8 py-6 bg-gray-50 dark:bg-gray-750 border-b border-gray-200 dark:border-gray-700">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div>
                        <span class="block text-sm font-medium text-gray-500 dark:text-gray-400">版本</span>
                        <span class="mt-1 text-sm text-gray-900 dark:text-white">{{ plugin.version }}</span>
                    </div>
                    <div>
                        <span class="block text-sm font-medium text-gray-500 dark:text-gray-400">作者</span>
                        <span class="mt-1 text-sm text-gray-900 dark:text-white">
                            {% if plugin.author_url %}
                            <a href="{{ plugin.author_url }}" target="_blank" class="text-blue-600 hover:underline">{{ plugin.author }}</a>
                            {% else %}
                            {{ plugin.author }}
                            {% endif %}
                        </span>
                    </div>
                    <div class="sm:col-span-2">
                        <span class="block text-sm font-medium text-gray-500 dark:text-gray-400">描述</span>
                        <span class="mt-1 text-sm text-gray-900 dark:text-white">{{ plugin.description }}</span>
                    </div>
                </div>
            </div>

            <!-- 设置表单 -->
            <div class="p-8">
                <div class="settings-form">
                    {{ settings_html|safe }}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 处理设置表单提交
async function handleSettingsSubmit(form) {
    try {
        const formData = new FormData(form);
        const response = await fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        });
        
        const data = await response.json();
        showToast(data.message, data.status);
        
        if (data.status === 'success') {
            // 延迟一下再刷新，让用户看到成功提示
            /*setTimeout(() => {
                window.location.reload();
            }, 200);*/
        }
    } catch (error) {
        console.error('Error saving settings:', error);
        showToast('保存设置失败', 'error');
    }
}

// 显示提示信息
function showToast(message, type = 'info') {
    const toast = document.createElement('div');
    toast.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-300 ${
        type === 'error' ? 'bg-red-500 text-white' : 'bg-blue-500 text-white'
    }`;
    toast.textContent = message;
    
    document.body.appendChild(toast);
    
    // 淡入效果
    setTimeout(() => {
        toast.style.opacity = '1';
        toast.style.transform = 'translateY(0)';
    }, 100);
    
    // 3秒后淡出
    setTimeout(() => {
        toast.style.opacity = '0';
        toast.style.transform = 'translateY(1rem)';
        setTimeout(() => {
            document.body.removeChild(toast);
        }, 300);
    }, 3000);
}
</script>
{% endblock %} 